<template>
  <el-container class="login">
    <el-main>
      <div class="login-container">
        <img src="@/assets/logo_text_white.png" class="logo" />
        <div class="title">赛特威尔NB-IOT设备管理平台</div>
        <div class="login-inner-container">
          <el-form :model="loginParams" :rules="loginRules" ref="loginForm">
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginParams.username"
                clearable
                placeholder="用户名"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginParams.password"
                clearable
                placeholder="密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-button
              type="primary"
              @click="login"
              class="login-btn"
              :loading="logining"
            >{{ logining ? '登录中...' : '登录' }}</el-button>
          </el-form>
        </div>
      </div>
    </el-main>
    <el-footer class="copyrigh">&copy;2022 赛特威尔电子股份有限公司</el-footer>
  </el-container>
</template>

<script>
import { mapState } from 'vuex';
import { authService, menuService } from '@/services';

export default {
  name: 'Login',
  data() {
    return {
      logining: false,
      loginParams: {
        username: null,
        password: null,
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  computed: mapState({
    loginSysUserVo: (state) => state.loginSysUserVo,
    state: (state) => state,
  }),
  methods: {
    redirect() {
      
      if (this.loginSysUserVo==null || this.loginSysUserVo.permissionCodes==null ||this.loginSysUserVo.permissionCodes.length==0) {
        this.$message({ showClose: true, message: '退出登录', type: 'error' });
        return;
      }

      const menuList = menuService.getMenuList(this.loginSysUserVo.permissionCodes);
      if (menuList && menuList.length > 0) {
        if (menuList[0].children) {
          return menuList[0].children[0].index;
        } else {
          return menuList[0].index;
        }
      } else {
        this.$message({ showClose: true, message: '该帐号无任何权限，请联系管理员分配权限', type: 'error' });
        authService.logout();
        return;
      }
    },
    async login() {
      try {
        await this.$refs.loginForm.validate();
        this.logining = true;
        await authService.login(this.loginParams);
        this.logining = false;
        const path = this.redirect();
        if (path) {
          this.$router.push({ path });
        }
      } catch (e) {
        this.logining = false;
        console.error(e);
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (authService.isLogin()) {
      next((vm) => {
        const path = vm.redirect();
        if (path) {
          vm.$router.replace({ path });
        }
      });
    } else {
      next();
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: url(~@/assets/platform-bg.jpg) no-repeat 50% / cover;
  .el-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-container {
    width: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    .logo {
      margin-bottom: 10px;
    }
    .title {
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 16px;
    }
    .login-inner-container {
      align-self: stretch;
      background-color: #ffffff;
      padding: 48px;
      border-radius: 10px;
      .login-btn {
        width: 100%;
      }
    }
  }
  .copyrigh {
    text-align: center;
    padding: 48px;
    color: #ffffff;
  }
}
</style>
